<template>
  <div class="container" id="provinceLargeScreenMap">
    <!-- <h1>Dashboard</h1> -->
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.tilelayer.colorfilter";
export default {
  name: "Dashboard",
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化
      let map = L.map("provinceLargeScreenMap", {
        center: [30.5, 114.3], // 地图中心
        zoom: 3, // 缩放比列
        minZoom: 3, // 最小比例
        maxZoom: 15, // 最大比例
        zoomControl: false, // 禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
      });

      let myFilter = [
        // "blur:0px", // 应用以像素为单位的高斯模糊滤波
        // "brightness:200%", // 控制互动程序图像的亮度，默认100%，亮度越小，底图上的道路、名字等元素显示的越清晰
        // "contrast:100%", // 更改瓷砖的颜色对比度，默认100%
        // "grayscale:100%", // 将图块的颜色更改为灰度，默认0%，道路、湖泊、河流等色块的颜色
        // "hue:0deg", // 在平铺颜色上应用色调旋转（以度为单位）默认0deg
        // "opacity:100%", // 定义图块的不透明度，默认100%，地图的不透明度
        // "invert:100%", // 反转瓷砖颜色，默认0%
        // "saturate:10%", // 使瓷砖颜色饱和，默认100%
        // "sepia:100%", // 将平铺颜色转换为棕褐色，默认0%
        // "blur:0px",
        // "brightness:95%",
        // "contrast:100%",
        // "grayscale:60%",
        // "hue:160deg",
        // "opacity:100%",
        // "invert:100%",
        // "saturate:300%",
        // "sepia:10%",
      ];

      L.tileLayer
        .colorFilter(
          // "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          "http://localhost:3333/tiles/{z}/{y}/{x}.png",
          {
            attribution: "xx",
            maxZoom: 18,
            // 设置颜色滤镜
            filter: myFilter
            // 设置不透明度
            // opacity: 1,
          }
        )
        .addTo(map);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 10px;
  position: absolute;
}
</style>
